<link rel="stylesheet" type="text/css" href="../core/resource/css/jinyunicon.css?v=20190601">
<style>
.fui-goods-group.block .fui-goods-item .app-ewm {
    position: absolute;
    top: 0;
    bottom: 50px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(64,64,64,.75);
    padding: 50px 20px;
    z-index: 18;
    display: none;
}
.fui-goods-group.block .fui-goods-item .app-ewm .wap-qrcode-image {
    vertical-align: middle;
    width: 108px;
    margin: 0 5px;
    border-radius: 50%;
    color: #fff;
}
.fui-goods-item .image:hover .app-ewm {
	display:block
}
.icon-span {
	float:right;
	display:inline-block;
	margin-left:5px;
}
.icon-span .i-text {
	padding:0 3px;
	display: none;
}

.icon-span:hover .i-text {
	background:#18bc9c;
	color:#fff;
	display: block;
}
.icon-span:hover .icon {
	color:#18bc9c;
}
.background-color-width-change {
	-webkit-transition:background-color .3s,color .3s,width .3s;
	transition:background-color .3s,color .3s,width .3s
}
</style>
<ul class="nav nav-tabs">
	<li ng-class="{'active':pagedata.op=='list'}"><a href="javascript:;" ng-click="access('list')">我的场景</a></li>
	<li ng-class="{'active':pagedata.op=='tpllist'}"><a href="javascript:;" ng-click="access('tpllist')">场景样例</a></li>
</ul>
<div class="keyword-list-head">
	<div class="keyword-list-head clearfix">
		<div class="input-group jinyun-margin-bottom" style="width:465px;">
			<input class="form-control" type="text" ng-model="pagedata.params.title" value="" placeholder="输入模板名称" style="width: 427px;">
			<span class="input-group-btn"><button id="submit" ng-click="pagedata.params.page=1;access(pagedata.op,made_query(pagedata.params))" class="btn btn-default"><i class="fa fa-search"></i> 搜索</button></span>
		</div>
	</div>
</div>
<div class="alert alert-success alert-dismissable">
		<i class="fa fa-bullhorn alert-link"></i> 
		【使用技巧】：例如-如何适屏幕大小，如何设置表单等！：<a href="javascript:;" ng-click="modal_json('jy_xiu/list/help/')" class="btn btn-primary" style="padding:2px 6px;font-size:12px;">点击阅读</a></br>
		<red ng-if="pagedata.isfounder">尊敬的管理员：移步系统管理--系统设置--H5场景设置--可以自定义场景秀的域名（超级管理员可见）</red>		
				
</div>
<div class="clearfix table-responsive">
<div class="form-group" ng-if="pagedata.op=='tpllist'">
	<div class="btn-group site-tp-group">
		<a href="" ng-class="{'btn': 1,'active': pagedata.params.type == 0}" ng-click="pagedata.params.page=1;pagedata.params.type=group.value;access(pagedata.op,made_query(pagedata.params))">全部</a>
		<a href="" ng-repeat="group in pagedata.cates" ng-class="{'btn': 1,'active': pagedata.params.type == group.value}" ng-click="pagedata.params.page=1;pagedata.params.type=group.value;access(pagedata.op,made_query(pagedata.params))">{{group.title}}</a>
	</div>
</div>
<div class="jinyun-app-list">
	<div class="fui-goods-group block">
		<div ng-if="pagedata.op=='tpllist'" class="fui-goods-item site-col tj_item" style="height:100%">
			<div class="site-tp-li-msg addsite" style="height:100%;padding:80px 10px">
				<a href="javascript:;" ng-click="pagedata.modal_access('add');" style="text-align:center;">
				  <div style="font-size:33px;"><i class="fa fa-plus"></i></div>
				  <div style="margin:0px 30px">创建一个场景</div>
				</a>
			</div>
		</div>
         <div class="fui-goods-item" ng-repeat="item in pagedata.list">
					<div data-nocache="true" style="position: relative;">
						<div ng-class="{'image':1, 'echelon':pagedata.status==0}" data-text="{{item.statustitle}}" style="background-image: url('{{item.cover || '../core/resource/images/noplugin.jpg'}}');">
							<div class="timeshow" style="right:0">{{item.typename}}</div>
							<div class="dot-line"><span class="dot" style="margin-top:6px"></span><span class="hr0" style="float: left;margin-top:10px"></span><span class="roundxi">{{item.oneword || 'O~这个不错哦!'}}</span></div>
							<div class="app-ewm">
								<div style="width:240px;margin:0 auto">
								<div class="wap-qrcode-image l" id="qrcode-{{item.id}}" ng-init="tool.qr(item.url,'qrcode-'+item.id,'108',true)">
								</div>
								<div class="wap-qrcode-image l" id="qrcode-{{item.id}}-wxapp">
								</div>
								</div>
							</div>
							<div class="cover-dark">
								<div class="selected">
									<i class="fa fa-check"></i>
								</div>
							</div>
						</div>
					</div>
                     <div class="detail">
                            <div class="name" style="font-size:18px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.name || '未设置标题'}} <span class="r" style="font-size:12px;color:red">{{item.time}}</span></div>
							<div class="price" style="margin-top: 6px;height:32px">
								<span><i class="icon icon-browse"></i></span>
								<span class="text" style="margin-left:10px"> {{item.showCount || '0'}}次</span>
								<button ng-if="pagedata.op=='list'" class="buy r" href="javascript:;" ng-click="pagedata.editscene(item.id)"> 编辑</button>
								<button ng-if="pagedata.op=='tpllist'" class="buy r" href="javascript:;" ng-click="pagedata.modal_access('copysys');pagedata.post.id=item.id;pagedata.post.type=item.type"> 就这个</button>
							</div>
							<div class="l">								
								<a href="javascript:;" ng-click="access_modal('jy_xiu/list/formdata/id='+item.id)" class="icon-span background-color-width-change"> <i class="l icon icon-form"></i> <span class="l i-text">表单数据</span></a>
								<a href="javascript:;" ng-click="access_modal('jy_xiu/list/msglist/id='+item.id)" class="icon-span background-color-width-change"> <i class="l icon icon-comments"></i> <span class="l i-text">留言信息</span></a>
								<a href="javascript:;" ng-click="clip(item.url)" class="icon-span background-color-width-change"> <i class="l icon icon-link"></i> <span class="l i-text">复制链接</span></a>
							</div>
							<div ng-if="pagedata.op=='list'" class="price r" style="margin-top: 0.3rem">
								<a href="javascript:;" ng-click="post({},'jy_xiu/list/delscene/','id='+item.id,'','确定删除该场景？')" class="icon-span background-color-width-change"> <i class="l icon icon-shanchu"></i> <span class="l i-text">删除</span></a>
								<a href="javascript:;" ng-click="pagedata.copyscene(item.id);" class="icon-span background-color-width-change"> <i class="l icon icon-copy"></i> <span class="l i-text">复制</span></a>
								<a href="javascript:;" ng-click="access_modal('/list/transferscene/id='+item.id+'&myid='+item.createUser)" class="icon-span background-color-width-change"> <i class="l icon icon-shengriliwu"></i> <span class="l i-text">转赠</span></a>
								<a href="javascript:;" ng-click="pagedata.editscene(item.id)" class="icon-span background-color-width-change"> <i class="l icon icon-shezhi"></i> <span class="l i-text">设置</span></a>
							</div>
                     </div>
		</div>
	</div>
</div>
	<!-- 分页导航 -->
	<div ng-include="sys_html('common/page',true)"></div>
</div>
<div id="modal_access"  class="modal fade" tabindex="-1" style="z-index:99999;display:none">
    <div class="modal-dialog" style="width:{{pagedata.width || '920px'}};max-height:480px">
        <div class="modal-content">
			<div class="modal-header">创建场景<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3></h3></div>
			<div class="modal-body" style="padding:10px;">
				<div class="col-jy" style="width:100%;"><div class="panel form-horizontal">
				<div class="page-header"><h4 class="ng-binding">创建场景</h4></div>
				<div class="panel-body">
				<div class="form-group">
					<label class="col-xs-12 col-sm-3 col-md-2 right-label ng-binding" ng-class="{'must':false}">选择分类</label>
					<div class="col-xs-12 col-sm-8 col-lg-9">
							<select class="form-control" ng-class="{'must_set':false}" ng-disabled="false" ng-model="pagedata.post.type">
								<option value="" selected="">请选择</option>
								<option ng-repeat="op in pagedata.cates" ng-selected="pagedata.post.type==op.value" value="101">{{op.title}}</option>
							</select>
							<div class="help-block" style="display:none;color:red;">请输入选择分类</div>
							<div class="help-block"></div>
					</div>
				</div>
				</div>
				</div>
				<div class="modal-sub"><button class="btn btn-primary" ng-click="pagedata.postscene()">提交</button></div>
				</div>
			</div>
        </div>
    </div>
</div>
<div id="modal_detail"  class="modal fade" tabindex="-1" style="z-index:99999;display:none">
    <div class="modal-dialog" style="width:80%;max-height:100%">
		<div id="iframe"></div>
		<div style="position: absolute;top:-25px;right:-15px;z-index:10">
			<i aria-hidden="true" data-dismiss="modal" class="icon icon-cuowu" style="color:#fff;font-size:26px"></i>
		</div>
	</div>
</div>
<script>
scope.pagedata.editscene=function(id){
	scope.pagedata.linkurl = scope.pagedata.editurl + id
	console.log(scope.pagedata.linkurl);
	$('#iframe').html('<iframe src="'+window.scope.pagedata.linkurl+'" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="800px" scrolling="auto" allowTransparency="true"></iframe>');
	$('#modal_detail').modal();
}
scope.pagedata.modal_access=function(e){
	$('#modal_access').modal();
	scope.pagedata.post.e=e;
}
scope.pagedata.postscene=function(){
	var id = scope.pagedata.post.id;
	if(scope.pagedata.post.e =='add'){
		var url='/list/addscene/'
	}else if(scope.pagedata.post.e =='copysys'){
		var url='/list/createscene/'
	}
	scope.post_json(url,scope.pagedata.post,function(res){
		if(res.id){
			$('#modal_access').modal('hide');
			scope.pagedata.editscene(res.id);
		}else{
			scope.message(res);
		}
	});
}
scope.pagedata.copyscene=function(id){
	scope.confirm({
		'message':'确定复制此场景?',
		'success':function(){
			scope.post_json('/list/copyscene/id='+id,{},function(res){
				if(res.id){
					$('#modal_access').modal('hide');
					scope.pagedata.editscene(res.id);
				}else{
					scope.message(res);
				}
			});
		},
	});
}
</script>